<template>
	<view class="wrap">
		<view class="banner">
			<view class="blur">

			</view>
		</view>

		<!-- list -->

		



		<view v-if="list1.length" class="morePlay">
			<view class="item" v-for="(item,index) in list1">
				<image :src="'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/'+(index+12)+'.png'"
					mode="">
				</image>
				<view class="content">
					<view class="topTit">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.tips}}
					</view>

				</view>

				<view class="btns">
					<u-button @click="godetail(item)" type="primary" shape="circle" :ripple="true" ripple-bg-color="#909399">
						立即制作</u-button>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<view v-else class="empty">
			<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate"
				text="暂无数据" mode="list"></u-empty>
		</view>

	</view>

</template>
<script>
	export default {

		data() {
			return {
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
			};
		},
		onLoad() {
			this.getlist()
		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;

				this.getlist();

			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {
			// 获取图集列表
			getlist() {
				this.senDate = false;
				this.$u.api.find.series_list({
						page: this.formData.page,
						size: this.formData.pageSize,
						appletId: this.vuex_appletId
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);
							console.log(this.list1.length, '********', this.formData.pageSize);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			godetail(item) {
				console.log(item,444444);
				uni.navigateTo({
					url: "/subpackFind/index?type="+item.type+'&id='+item.id
				})
			}
		}
	};
</script>
<style lang="scss">
	.morePlay {
		position: relative;
		z-index: 3;
		margin: 185rpx 24rpx 0;

		.item {
			margin-bottom: 24rpx;
			padding: 12rpx;
			background: rgba(45, 48, 85, 0.35);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 163rpx;
				height: 169rpx;
				border-radius: 10rpx;
				margin-right: 14rpx;
			}

			.content {
				flex: 1;

				.topTit {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					// line-height: 33rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;

				}

				.desc {
					font-size: 23rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #65698D;
					// line-height: 23rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					margin: 6rpx 0 0;
				}

			}

			.btns {
				width: 167rpx;
				height: 61rpx;
				// background: #8CC950;

				margin-left: 8rpx;

				/deep/ .u-size-default {
					width: 167rpx;
					height: 61rpx !important;
					border-radius: 54rpx;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

			}
		}
	}




	.banner {
		top: 0;
		left: 0;
		position: absolute;
		background: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/11.png") no-repeat;
		width: 100%;
		height: 398rpx;
		background-size: 100% 100%;

		.blur {
			backdrop-filter: blur(8px);
			width: 710rpx;
			height: 169rpx;
			position: absolute;
			right: 50rpx;
			bottom: 45rpx;
		}
	}
</style>
